<template>
    <a-drawer title="输入数据" :height="600" placement="top" v-if="open" v-model:visible="open">
        <a-steps :current="current">
            <a-step title="基本信息" />
            <a-step title="测井项目，作业人员与车辆" description="" />
            <a-step title="其它" description="" />
        </a-steps>
        <br>
        <BasicInfo ref="BasicInfoRef" @getCurrent="getCurrent" :state="props.state" :wellQuery="wellQuery"
            v-if="current === 0">
        </BasicInfo>
        <ProjectInfo ref="ProjectInfoRef" @getCurrent="getCurrent" :state="props.state" :wellQuery="wellQuery"
            v-if="current === 1">
        </ProjectInfo>
        <OtherInfo ref="OtherInfoRef" @getCurrent="getCurrent" :state="props.state" :wellQuery="wellQuery"
            v-if="current === 2">
        </OtherInfo>
        <!-- <template #extra>
            <a-space>
                <a-button v-if="current !== 0" @click="onClose">上一步</a-button>
                <a-button v-if="current !== 2" type="primary" @click="onClose">下一步</a-button>
                <a-button v-if="current === 2" type="primary" @click="onClose">完成</a-button>
            </a-space>
        </template> -->
        <a-divider />
    </a-drawer>
</template>
<script setup>
import BasicInfo from '../type/BasicInfo'
import ProjectInfo from '../type/ProjectInfo';
import OtherInfo from '../type/OtherInfo'
import useApp from "@/hooks";
import DesignScheme from '@/api/design/schemes.js'
import { WellDatas } from '@/custom/salvage/constant/address.js'  //新建井判断
const { $, proxy } = useApp();
const emit = defineEmits(["getData", 'deliverData'])
const props = defineProps({
    state: String,
})
const current = ref(0)
const BasicInfoRef = ref(null)
const ProjectInfoRef = ref(null)
const OtherInfoRef = ref(null)
const wellQuery = ref({})
const open = ref(false)

watch(() => props.state, (newVal) => {
    console.log(newVal)
    current.value = 0
    if (newVal === '修改井') {
        localStorage.setItem("state", '修改井');
    } else if (newVal === '新建井') {
        localStorage.setItem("state", '新建井');
        wellQuery.value = {}
    }
})
function getCurrent(e) {
    if (e.page === 'submit' && props.state === '新建井') {
        wellQuery.value = { ...wellQuery.value, ...e };
        console.log('wellQuery.value', wellQuery.value);
        DesignScheme.createSchemes(wellQuery.value.wellId).then(res => {
            localStorage.setItem("schemeId", res.id);
            localStorage.setItem("wellId", res.wellId);
            localStorage.setItem("fileId", undefined)
            DesignScheme.updateOne(res.id, wellQuery.value).then(e => {
                // console.log('update', res);
                // localStorage.setItem("schemeId", e.id)
                open.value = false
                current.value = undefined
                $.showToast({
                    title: '新建成功',
                    icon: 'success'
                })
                // let id = localStorage.getItem("schemeId")
                WellDatas(res.id, e.wellId);
                emit('deliverData', e)
            })
            console.log('createSchemes', res);
        })
    } else if (e.page === 'submit' && props.state === '修改井') {
        wellQuery.value = { ...wellQuery.value, ...e };
        let schemeId = localStorage.getItem("schemeId");
        // console.log('wellQuery.value', wellQuery.value.wellId);
        localStorage.setItem("wellId", wellQuery.value.wellId);
        DesignScheme.updateOne(schemeId, wellQuery.value).then(res => {
            $.showToast({
                title: '修改成功',
                icon: 'success'
            })
            open.value = false
            current.value = undefined
            // console.log('updateOne', res);
            // localStorage.setItem("schemeId", res.id)
            emit('deliverData', res)
        })
    } else {
        // console.log(wellQuery.value)
        current.value = e.page
        wellQuery.value = { ...wellQuery.value, ...e };
        delete e.page
    }
}
function openDrawer() {
    current.value = 0
    open.value = true;
}
defineExpose({
    openDrawer: openDrawer
})

</script>
<style scoped>
.steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
}

.steps-action {
    margin-top: 24px;
}

[data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
}
</style>